<template>
  <div class="div">
    <h1>称重厨余垃圾记录表上传</h1>
    <el-upload drag
               ref="upload"
               :limit=limitNum
               :auto-upload="false"
               accept=".xlsx, .xls"
               :action="UploadUrl()"
               :before-upload="beforeUploadFile"
               :on-change="fileChange"
               :on-exceed="exceedFile"
               :on-success="handleSuccess"
               :on-error="handleError"
               :on-remove="removeFile"
               :file-list="fileList">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传xlsx或xls文件，且不超过10M</div>
    </el-upload>
    <br/>
    <el-button class="el-blue-button" ref="submitBtn" size="small" type="primary" @click="uploadFile">确认上传
      <i class="el-icon-upload el-icon--right"></i>
    </el-button>
    <el-button size="small">取消</el-button>
  </div>
</template>

<script>
import { baseURL } from '@/config/baseConfig'

export default {
  name: 'index',
  data () {
    return {
      limitNum: 1,
      fileList: []
    }
  },
  methods: {
    exceedFile (files, fileList) {
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
    },
    fileChange (file, fileList) {
      console.log(file.raw)
      this.fileList.push(file.raw)
      console.log(this.fileList)
    },
    beforeUploadFile (file) {
      console.log(file)
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx' || extension !== 'xls') {
        this.$message.warning('只能上传后缀是.xlsx或.xls的文件')
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超过10M')
      }
    },
    handleSuccess (res, file, fileList) {
      this.$message.success('文件上传成功')
    },
    // eslint-disable-next-line handle-callback-err
    handleError (err, file, fileList) {
      this.$message.error('文件上传失败 请检查文件格式')
    },
    UploadUrl: function () {
      // 二次确认上传
      return ''
    },
    removeFile (file, fileList) {
      this.fileList = fileList
      this.$message.success('文件移除成功')
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    uploadFile (fileList) {
      if (this.fileList.length === 0) {
        this.$message.warning('请上传文件')
      } else {
        this.$refs.submitBtn.loading = true
        const form = new FormData()
        form.append('file', this.fileList[0])
        form.append('factory', this.$store.getters.getFactory)
        this.$axios({
          method: 'post',
          url: baseURL + '/sjq/weightProductionKitchenInfo/addFromKitchenExcel',
          headers: {
            'Content-type': 'multipart/form-data'
          },
          data: form
        }).then(
          res => {
            this.$refs.submitBtn.loading = false
            console.log(res.data.data.length)
            this.$refs.upload.clearFiles()
            if (res.data.data.length === 0) {
              this.handleError()
            } else {
              this.handleSuccess()
            }
            // eslint-disable-next-line handle-callback-err
          }, err => {
            this.$refs.submitBtn.loading = false
            this.handleError()
          })
      }
    }
  }
}
</script>

<style scoped>
h1{
  color: black;
}
.div{ position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);}
</style>
